<template>
	<view class="contentBody" style="margin-top:100px">
		<!-- <u-index-list title="回收品类" style="background-color:#6fd98e"></u-index-list> -->
		<view class="class_boxs">
			<div v-for="(item, index) in categories" :key="index" class="cols color_1_icon"
				@click="navigateTo(item.type)">
				<view class="subName">{{ item.name }}</view>
				<view class="subTitle">
					<text v-for="subItem in item.subItems" :key="subItem">{{ subItem }}</text>
				</view>
				<view class="order_btn"></view>
				<view class="r_icon"></view>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			categories: {
				type: Array,
				default () {
					return [];
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.gongao_icon_box {
		width: 694rpx;
		height: 200rpx;
		background: #ffffff;
		border-radius: 20rpx;
		z-index: 99;
		margin-top: 0rpx;
		position: absolute;
		left: 28rpx;
		box-shadow: 0 0 5px #dedede;
	}

	.bannerBox {
		width: 694rpx;
		padding-top: 30rpx;
		padding-bottom: 26rpx;
		margin: 0 auto;
	}

	.class_boxs {
		width: 100%;
		justify-content: space-between;
		display: flex;
		flex-flow: row wrap;
		padding-top: 24rpx;

		.cols {
			width: 145rpx;
			height: 200rpx;
			padding: 24rpx 160rpx 24rpx 30rpx;
			border-radius: 16rpx;
			margin-bottom: 24rpx;
			position: relative;


			.subName {
				font-size: 30rpx;
				font-weight: bolder;
				color: #ffffff;
				padding-bottom: 8rpx;
			}

			.subTitle {
				font-size: 24rpx;
				// color:#fff;
				// color: #ffffff;

				text {
					padding-right: 12rpx;
				}
			}

			.order_btn {
				width: 103rpx;
				height: 31rpx;
				background: url(~@/static/coolc/order_btn.png) no-repeat;
				background-size: 100% auto;
				position: absolute;
				left: 30rpx;
				bottom: 24rpx;
			}

			.r_icon {
				width: 160rpx;
				height: 200rpx;
				position: absolute;
				right: 0rpx;
				top: 0rpx;
				background-position: center;
				background-repeat: no-repeat;
				background-size: auto 140rpx;
			}
		}

		.color_1_icon {
			background: linear-gradient(to right, #76dc8f, #16b281);

			.r_icon {
				background-image: url(~@/static/coolc/class_icon/class_1.png);
				background-size: 110rpx 130rpx;
			}
		}

		.color_2_icon {
			background: linear-gradient(to right, #92dbff, #2eb5ff);

			.r_icon {
				background-image: url(~@/static/coolc/class_icon/class_2.png);
				background-size: 120rpx 130rpx;
			}
		}

		.color_3_icon {
			background: linear-gradient(to right, #b5cef1, #8eaad7);

			.r_icon {
				background-image: url(~@/static/coolc/class_icon/class_3.png);
			}
		}

		.color_4_icon {
			background: linear-gradient(to right, #ffb43f, #ff8a00);

			.r_icon {
				background-image: url(~@/static/coolc/class_icon/class_4.png);
			}
		}
	}
</style>